<template>
  <div class="/housePicture">
    <!-- 切换按钮 -->
    <el-form :model="selectForm">
      <div class="houseType">
        <el-button :type="type1" @click="buttonChang1">分散式</el-button>
        <el-button :type="type2" @click="buttonChang2">集中式</el-button>
      </div>
      <div class="form">
        <el-select v-model="selectForm.province" clearable placeholder="请选择省" @change="Selectcity(selectForm.province)">
          <el-option
            v-for="province in options"
            :key="province.value"
            :label="province.regionName"
            :value="province.regionId"
          />
        </el-select>
        <el-select v-model="selectForm.city" clearable placeholder="请选择市" @change="SelectCount(selectForm.city)">
          <el-option
            v-for="city in citys"
            :key="city.value"
            :label="city.regionName"
            :value="city.regionId"
          />
        </el-select>
        <el-select v-model="selectForm.county" clearable placeholder="请选择县/区">
          <el-option
            v-for="county in count"
            :key="county.value"
            :label="county.regionName"
            :value="county.regionId"
          />
        </el-select>
        <el-input v-model="selectForm.preName" type="text" style="width: 30%; margin-left: 30px" placeholder="搜索：小区名，公寓名，房间号，租客名" />
        <el-button type="warning" style="width: 100px;margin-left: 20px" @click="onsubmit">搜索</el-button>
      </div>
    </el-form>
    <!-- 快速查询-->
    <div style="width:95%;" class="demo-form-inline">
      <el-tabs @tab-click="handleClick">
        <el-tab-pane label="全部" name="0" />
        <el-tab-pane label="租房分期" name="4" />
        <el-tab-pane label="租约保理" name="3" />
        <el-tab-pane label="空置可租" name="1" />
        <el-tab-pane label="欠费提醒" name="6" />
        <el-tab-pane label="收费提醒" name="5" />
        <el-tab-pane label="合同快到期" name="7" />
        <el-tab-pane label="合同已到期" name="8" />
        <el-tab-pane label="装修维护" name="2" />
      </el-tabs>
    </div>
    <!-- 展示房源  开始-->
    <!--eslint-disable-next-line-->
    <div v-for="roomFS in RoomData" style="width:95%;box-shadow: 0px 0px 20px #cccc inset;" class="demo-form-inline"  v-if="selectForm.hostType===0">
      <div class="topContent" style="border: none;">
        <h4>{{ roomFS.preName }}&nbsp;&nbsp;<span v-if="roomFS.bdiNo!=null && roomFS.bdiNo!=''" style="position: relative;left: -30px;font-size: 12px" class="span">({{ roomFS.bdiNo }})</span>
          <span class="span">{{ roomFS.leaseType==0?'整租':'合租' }}</span>
          <span class="span">{{ roomFS.publishStatus==0?'未发布':'已发布' }}</span>
          <span class="span">房间数：{{ roomFS.roomCount }}套</span>
          <el-button icon="el-icon-edit-outline" type="warning" class="an1">修改</el-button>
          <el-button icon="el-icon-edit-outline" type="warning" class="an1">发布</el-button>
          <el-button icon="el-icon-delete" type="warning" class="an1">删除</el-button>
        </h4>
        <hr>
      </div>
      <!--内容      -->
      <div class="nr">
        <!--eslint-disable-next-line-->
        <div v-for="roomMini in roomFS.roomMni" class="fk" @click="feature(roomMini.preId)">
          <h3 style="text-align: center">{{ roomMini.roomCode }}</h3>
          <p v-if="roomFS.tenantName!=null&&roomFS.tenantName!=''" class="name">
            {{ roomFS.tenantName }}
          </p>
          <!--eslint-disable-next-line-->
          <span v-for="detail in roomMini.miniDetail">
            <p v-if="roomFS.tenantName==null">
              <a class="kz">空置{{ detail.total }}天</a>
            </p>
          </span>
          <br>
          <div v-if="roomFS.tenantName!=null" class="db" style="background: #FCE38A;margin-top: 22px">
            <!--            <img src="../../../img/leased.png" height="14" width="14" style="margin-left: 20px">-->
            <b style="float: right">{{ roomMini.rental }}元/月</b>
          </div>
          <div v-if="roomFS.tenantName==null" class="db" style="margin-top: 22px">
            <!--            <img src="../../../img/vacancy.png" height="14" width="14" style="margin-left: 20px">-->
            <b style="float: right">{{ roomMini.rental }}元/月</b>
          </div>
        </div>
      </div>
      <br>
    </div>
    <!-- 集中展示房源  开始-->
    <!--eslint-disable-next-line-->
    <div v-for="roomJz in RoomData" v-if="selectForm.hostType===1" style="width:95%;box-shadow: 0px 0px 20px #cccc inset;" class="demo-form-inline">
      <!--  集中式    -->
      <div class="topContent" style="border: none;">
        <h4>{{ roomJz.flatName }}&nbsp;&nbsp;<span v-if="roomJz.preName!=null && roomJz.preName!=''" style="position: relative;left: -30px;font-size: 12px" class="span">({{ roomJz.preName }})</span>
          <span class="span">集中公寓</span>
          <el-button icon="el-icon-edit-outline" type="warning" class="an1" @click="toUpdateHouse(roomJz)">修改</el-button>
          <el-button icon="el-icon-edit-outline" type="warning" class="an1" @click="chanceStatus(roomJz,0)">{{ roomJz.publishStatus==0?'发布':'取消发布' }}</el-button>
          <el-button icon="el-icon-delete" type="warning" class="an1" @click="chanceStatus(roomJz,1)">删除</el-button>
        </h4>
        <hr>
      </div>
      <!--eslint-disable-next-line-->
      <div v-for="ldDetail in roomJz.ldDetail">
        <div class="Content" style="border: none;"><el-button type="warning">{{ ldDetail.buildingName }}栋</el-button>&nbsp;&nbsp;数据统计：空置<font color="#ffba00">{{ ldDetail.vacancyNum }}</font>间，共<font color="#ffba00">{{ ldDetail.total }}</font>间</div><hr style="margin-left: 40px">
        <!--内容      -->
        <!--eslint-disable-next-line-->
        <div v-for="miniDetail in ldDetail.miniDetail" class="nr">
          <!--eslint-disable-next-line-->
          <div v-for="miniData in miniDetail.miniDetail" class="fk">
            <h3 style="text-align: center">{{ miniData.roomCode }}</h3>
            <p v-if="miniData.tenantName!=null&&miniData.tenantName!=''" class="name">
              {{ miniData.tenantName }}
            </p>
            <!--eslint-disable-next-line-->
            <span v-for="detail in miniData.miniDetail">
              <div v-show="miniData.roomStatus==0">
                <p v-if="miniData.tenantName==null && detail.total!=null">
                  <a class="kz">空置{{ detail.total }}天</a>
                </p>
              </div>
              <div v-show="miniData.roomStatus==2">
                <p v-if="miniData.tenantName==null && detail.total!=null">
                  <a class="zx">装修{{ detail.total }}天</a>
                </p>
              </div>
            </span>
            <br>
            <div style="margin-top: 10px">
              <div v-if="miniData.roomStatus==1" class="db2" style="background: #FCE38A;margin-top: 22px">
                <!--                <img src="../../../img/leased.png" height="14" width="14" style="margin-left: 20px">-->
                <b style="float: right">{{ miniData.rental }}元/月</b>
              </div>
              <div v-else-if="miniData.roomStatus==0" class="db">
                <!--                <img src="../../../img/vacancy.png" height="14" width="14" style="margin-left: 20px">-->
                <b style="float: right">{{ miniData.rental }}元/月</b>
              </div>
              <div v-else-if="miniData.roomStatus==2" class="db3">
                <!--                <img src="../../../img/fix.png" height="14" width="14" style="margin-left: 20px">-->
                <b style="float: right">{{ miniData.rental }}元/月</b>
              </div>
            </div>
          </div>
        </div>
      </div>
      <br>
    </div>

    <div v-show="total===0">
      <!--      <img src="../../../img/img.png" height="500" width="500" style="margin-left: 200px">-->
    </div>

    <!--  分页  -->
    <div v-show="total!=0" class="block">
      <el-pagination
        :current-page="selectForm.pageNum"
        :page-sizes="[10, 20]"
        :page-size="selectForm.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      RoomData: [],
      type1: 'warning',
      type2: '',
      selectForm: {
        province: 0,
        city: 0,
        county: 0,
        hostType: 0,
        fangtaiType: 0,
        preName: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 244,
      count: [],
      options: [],
      citys: []
    }
  },
  created() {
    this.initRoomList()
    this.city()
  },
  methods: {
    initRoomList() {
      // eslint-disable-next-line eqeqeq
      /* if (this.selectForm.hostType == '' || this.selectForm.hostType == null) {
        this.selectForm.hostType = 0
      }*/
      this.axios.post('http://localhost:9999/fy/roomInfo/list', this.selectForm).then((res) => {
        if (res) {
          // eslint-disable-next-line eqeqeq
          if (this.selectForm.hostType == 0) {
            this.RoomData = res.data.obj.records
          } else {
            // this.RoomData = res.data.obj.responseJzVos.list
            this.RoomData = res.data.obj.records
            // this.total = res.data.obj.responseJzVos.total
          }
        }
      })
    },
    Selectcity(val) {
      this.selectForm.city = ''
      this.selectForm.county = ''
      this.axios.post('http://localhost:9999/system/region/shi', { 'country': val }).then((response) => {
        this.citys = response.data
      })
    },
    SelectCount(val) {
      this.selectForm.county = ''
      this.axios.post('http://localhost:9999/system/region/qu', { 'city': val }).then((response) => {
        this.count = response.data
      })
    },
    city() {
      this.selectForm.province = ''
      this.selectForm.city = ''
      this.selectForm.county = ''
      this.axios.post('http://localhost:9999/system/region/sheng').then((response) => {
        this.options = response.data
      })
    },
    fastSearch(fangtaiType) {
      this.selectForm.fangtaiType = fangtaiType
      this.selectForm.pageNum = 1
      this.initRoomList()
    },
    handleSizeChange(val) {
      this.selectForm.pageSize = val
      this.initRoomList()
    },
    handleCurrentChange(val) {
      this.selectForm.pageNum = val
      this.initRoomList()
    },
    onsubmit() {
      this.selectForm.pageNum = 1
      this.initRoomList()
    },
    buttonChang1(val) {
      // this.total = '0'
      this.RoomData = []
      this.type1 = 'warning'
      this.type2 = ''
      this.selectForm.hostType = 0
      this.selectForm.pageNum = 1
      this.initRoomList()
    },
    buttonChang2(val) {
      // this.total = '0'
      this.RoomData = []
      this.type2 = 'warning'
      this.type1 = ''
      this.selectForm.hostType = 1
      this.selectForm.pageNum = 1
      this.initRoomList()
    },
    handleClick(tab, event) {
      this.fastSearch(tab.name)
    },
    feature(val) {
      console.log(val)
    }
  }
}
</script>

<style scoped>
.btn:hover{
  color: #FEC171;
  background: #ffba00;
}
.houseType{
  margin-top:30px;
  margin-left: 30px;
}
.form{
  display: block;
  margin-left: 30px;
  margin-top: 30px;
}
.demo-form-inline{
  margin: auto;
  margin-top: 20px;
}
.an{
  padding: 4px 20px;
  margin-right: 10px;
  font-size: 12px;
}
.topContent {
  padding-top: 20px;
  padding-left: 40px;
  padding-bottom: 30px;
  border: 1px solid #ccc;
  font-size: 25px;
}
.span {
  margin-left: 35px;
  font-weight: bold;
  font-size: 14px;
}
.an1{
  margin-left: 30px;
}
.nr{
  height: 90%;
  width: 100%;
  display: inline-block;
  box-shadow: 0px 5px 0px 0px #dcdc;
}
.fk{
  float: left;
  border: 1px solid #bfcbd9;
  margin-left: 40px;
  margin-top: 10px;
  width: 117px;
  height: 156px;
}
.kz{
  margin-left: 30px;
  border: 1px solid #31d05a;
  color: #31d05a;
  font-size: 15px;
  border-radius: 15%;
}
.db{
  float: right;
  width: 100%;
  height: 25px;
  line-height: 35px;
  font-size: 12px;
  color: #989898;
  background: #d6f6de;
}
.name{
  margin-left: 45px;
  font-size: 13px;
}
</style>
